/*
 * 封装时间弹出框的内容和行为,匿名函数包裹
 */
(function(){
	var datepicker = window.datepicker;
	var monthData,$warpper;
	
	// 数据渲染，一般使用模板引擎渲染
	datepicker.buildUi=function(year,month){
		// 获取当月数据
		monthData = datepicker.getMonthData(year,month);
		// 拼装时间表格的html字符串
		var html = '<div class="ui-datepicker-header">'+
				'<a href="#" class="ui-datepicker-btn ui-datepicker-prev-btn">&lt;</a>'+
				'<a href="#" class="ui-datepicker-btn ui-datepicker-next-btn">&gt;</a>'+
				'<span class="ui-datepicker-curr-month">'+monthData.year+'-'+monthData.month+'</span>'+
			'</div>'+
			'<div class="ui-datepicker-body">'+
				'<table>'+
					'<thead>'+
						'<tr>'+
							'<th>一</th>'+
							'<th>二</th>'+
							'<th>三</th>'+
							'<th>四</th>'+
							'<th>五</th>'+
							'<th>六</th>'+
							'<th>日</th>'+
						'</tr>'+
					'</thead>'+
					'<tbody>';
					for(var i=0;i<monthData.days.length;i++){
						var date = monthData.days[i];
						// 每周 的第一天
						if(i%7===0){
							html +='<tr>'; 
						}
						// 单元格的值
						html+='<td data-date="'+date.date+'">'+date.showDate+'</td>';
						// 每周的最后一天
						if(i%7===6){
							html+='</tr>';
						}
					}
					html+='</tbody>'+
				'</table>'+
			'</div>';
		return html;
	};
	
	//渲染HTML
	datepicker.render=function(direction){
		var year,month;
		// 存入，获取年月的值
		if(monthData){
			year = monthData.year;
			month = monthData.month;
		}
		
		// 上一个月
		if(direction==='prev'){
			month--;
		}
		if(direction==='next'){
			month++;
		}
		
		var html = datepicker.buildUi(year,month);
		// 放入dom树中
//		$dom.innerHTML = html;
		// 结构会混乱
//		document.body.innerHTML=html;
		// 生成<div class="ui-datepicker-warpper"> 选择器 函数注意里面参数
		$warpper = document.querySelector('.ui-datepicker-warpper');
		// 不存在，创建一个warpper
		if(!$warpper){
			$warpper = document.createElement('div');
			// 将warpper放入body中
			document.body.appendChild($warpper);
			$warpper.className = 'ui-datepicker-warpper';
		}
		$warpper.innerHTML = html;	
		
	};
	
	// 初始化时间表格内容(html)
	datepicker.init=function(input){
		datepicker.render();
		
		// 获取input元素
		var $input = document.querySelector(input);
		// 是否开启显示时间组件
		var isOpen = false;
		// 添加事件，显示或者隐藏时间组件
		$input.addEventListener('click',function(){
			if(isOpen){
				$warpper.classList.remove('ui-datepicker-warpper-show');
				isOpen = false;
			}else{
				$warpper.classList.add('ui-datepicker-warpper-show');
				// input元素的位置,指定是距离浏览器的body
				var left = $input.offsetLeft;
				var top = $input.offsetTop;
				var height = $input.offsetHeight;
				// warpper位置
				$warpper.style.top = top + height + 2 + 'px';
				$warpper.style.left = left + 'px';
				isOpen = true;
			}
		},false);
		
		// 给上一个月和下一个月绑定事件
		// 这个方法中只初始化一次，但是时间组件每次都会创建和销毁,应该绑定顶层容器
//		$warpper.querySelector('ui-datepicker-btn').addEventListener();
		$warpper.addEventListener('click',function(e){
			// 直接点击的元素
			var $target = e.target;
			// 点击的元素没有包含按钮元素，直接终止
			if(!$target.classList.contains('ui-datepicker-btn')){
				return false;
			}
			// 上一个月
			if($target.classList.contains('ui-datepicker-prev-btn')){
				datepicker.render('prev');
			}else if($target.classList.contains('ui-datepicker-next-btn')){
				datepicker.render('next');
			}
			
		},false);
		
		// 给选中的单元格绑定事件
		$warpper.addEventListener('click',function(e){
			var $target = e.target;
			// 没有点击单元格，直接结束
			if($target.tagName.toLowerCase()!=='td'){
				return false;
			}
			// 获取所选中的日期
			var date = new Date(monthData.year,monthData.month-1,$target.dataset.date);
			// 格式化日期
			$input.value = format(date);
			// 隐藏时间组件
			$warpper.classList.remove('ui-datepicker-warpper-show');
			isOpen = false;
		},false);
	};
	
	/*
	 * 格式化日期
	 */
	function format(date){
		ret = '';
		
		// 拼接月日完整类型
		var padding=function(num){
			if(num<=9){
				return '0'+num;
			}
			return num;
		};
		ret+=date.getFullYear()+'-';
		ret+=padding(date.getMonth()+1)+'-';
		ret+=padding(date.getDate());
		return ret;
	}
	
})();
